// @forward "element-plus/theme-chalk/src/mixins/config.scss" with (
//   $namespace: "vpp"
// );
// @use "element-plus/theme-chalk/src/index.scss" as *;

// 可视化应用自定义主题
.vpp {
  --vpp-bg-color: #fff;
  --vpp-bg-color-page: #f2f3f5;
  --vpp-border-color: #dcdfe6;
  --vpp-border-color-light: #e4e7ed;
  --vpp-border-color-lighter: var(--vpp-border-color); // 边框颜色表格

  --vpp-color-primary: #409eff; //主色

  --vpp-fill-color: #f0f2f5;
  --vpp-fill-color-blank: var(--vpp-bg-color); //#151827; //填充色(空白)
  --vpp-fill-color-light: #f5f7fa;
  --vpp-fill-color-lighter: #fafafa;

  --vpp-font-size: calc(var(--vpp-font-size-base) * 1px);

  --vpp-text-color: #303133;
  --vpp-text-color-primary: var(--vpp-text-color);
  --vpp-text-color-regular: var(--vpp-text-color); //TODO #606266 ;
  --vpp-text-color-secondary: var(--vpp-text-color); //TODO #909399;
  --vpp-text-color-placeholder: #a8abb2;
  --vpp-text-color-disabled: #c0c4cc;

  //滚动条
  --vpp-scrollbar-bg-color: #f1f1f1; // #373d44;//滚动条背景色
  --vpp-scrollbar-color: #bebebe; //#000;//滚动条颜色
  // --vpp-scrollbar-width: 15px; //5px; //滚动条宽度
  // --vpp-scrollbar-height: 15px; //5px; //滚动条高度
  --vpp-scrollbar-width: 15; //5px; //滚动条宽度
  --vpp-scrollbar-height: 15; //5px; //滚动条高度
}

//-element-plus样式复写(使用可视化应用主题)
.vpp,
.vpp-cmpt-el {
  --el-bg-color: var(--vpp-bg-color);
  --el-bg-color-overlay: var(--vpp-bg-color);

  --el-border-color: var(--vpp-border-color); //
  --el-border-color-light: var(--vpp-border-color); //
  --el-border-color-lighter: var(--vpp-border-color-lighter); //

  --el-color-primary: var(--vpp-color-primary);

  --el-fill-color-blank: var(--vpp-fill-color-blank); //
  --el-fill-color-light: var(--vpp-fill-color-light);
  --el-fill-color-lighter: var(--vpp-fill-color-lighter);
  --el-fill-color-blank: var(--vpp-fill-color-blank); //

  --el-font-size-base: var(--vpp-font-size);
  --el-font-weight-primary: var(--vpp-font-weight-base);

  --el-text-color-placeholder: var(--vpp-text-color-placeholder);
  --el-text-color-secondary: var(--vpp-text-color-placeholder); //
  --el-text-color-regular: var(--vpp-text-color); // 循环项文字颜色

  --el-font-weight-primary: var(--vpp-font-weight-base);

  --el-button-text-color: var(--vpp-text-color);
  --el-fill-color-blank: var(--vpp-bg-color);

  .el-button,
  .el-input__inner {
    font-family: var(--vpp-font-family);
  }
}

.vpp {
  color: var(--vpp-text-color); // 字体颜色
  font-size: var(--vpp-font-size);
  font-weight: var(--vpp-font-weight-base);
  font-family: var(--vpp-font-family);
}
.vpp-cmpt {
  // background-color: var(--vpp-bg-color);
  align-items: var(--vpp-align-items, unset);
  justify-content: var(--vpp-justify-content, unset);
  color: var(--vpp-text-color);
  font-size: var(--vpp-font-size, calc(var(--vpp-font-size-base) * 1px));
  font-weight: var(--vpp-font-weight-base);
  font-family: var(--vpp-font-family);
  .cmpt-body {
    position: relative;
    flex-grow: 1;
  }
  .cmpt-header {
    height: 40px;
    line-height: 40px;
    .el-tag {
      opacity: 0.7;
      background-color: var(--el-tag-text-color);
      border: none;
    }
    .active {
      opacity: 1;
    }
  }
}

.vpp::-webkit-scrollbar,
.vpp ::-webkit-scrollbar {
  background-color: var(--vpp-scrollbar-bg-color, #f1f1f1);
  border-radius: unset;
  // width: var(--vpp-scrollbar-width, unset);
  width: calc(var(--vpp-scrollbar-width) * 1px);
  // height: var(--vpp-scrollbar-height, unset);
  height: calc(var(--vpp-scrollbar-height) * 1px);
}
.vpp::-webkit-scrollbar-corner,
.vpp ::-webkit-scrollbar-corner {
  background-color: var(--vpp-scrollbar-bg-color, #f1f1f1);
}

.vpp::-webkit-scrollbar-thumb,
.vpp ::-webkit-scrollbar-thumb {
  border-radius: unset;
  background-color: var(--vpp-scrollbar-color, #c1c1c1);
}
